<script setup lang="ts">
import { ref } from 'vue'
import type { Patient } from '@/types/patient'
import { onShow } from '@dcloudio/uni-app'
import { getPatients } from '@/services/patient'

const patients = ref<Patient[]>()

onShow(async () => {
  patients.value = await getPatients()
  console.log(patients.value)
})

function prescribe(id: number) {
  uni.navigateTo({
    url: '/pages/doctor/prescription/prescribe?id=' + id
  })
}
</script>

<template>
  <view class="container">
    <view class="data-list">
      <view v-for="(data, i) in patients" :key="i" @click="">
        <view class="data-item">
          <!-- 左侧信息区域 -->
          <view class="data-item-left">
            <view>{{data.name}}</view>
          </view>
          <!-- 右侧按钮区域 -->
          <view class="data-item-right">
            <view class="data-item-btns">
              <button @click="prescribe(data.id)" type="warn" size="mini">开处方</button>

              <button @click="" type="primary" size="mini">沟通</button>
            </view>
            <view style="color: #888888">入选时间：2021/09/19 20:09</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.data-item {
  background-color: #FFFFFF;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;

  .data-item-left {
    margin-left: 10px;
  }

  .data-item-right {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .data-item-btns {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;

      button {
        margin: 0 0 10px 10px;
      }
    }
  }
}
</style>
